<template>
	<div class="header">
		<div class="logo">
			<a href="#" target="_blank">Uthinks</a>
		</div>
		<div class="left">
			<ul>
				<li>
					<router-link :to="{name: 'console'}">管理控制台</router-link>
				</li>
			</ul>
		</div>
		<div class="right">
			<ul>
				<li v-if="false">
					<badge :count="666" overflow-count="99">
					  消息
					</badge>
					<div class="drop-down">
						<ul>
							<li>【Flink只能做‘流’，不能做‘批’？】听听阿里产品经理周四晚直播这样说</li>
							<li>敬请8.15技术直播，聆听区块链及容器技术前沿分享</li>
							<li>EDAS应用一键接入ARMS，APM全面进阶</li>
							<li>你的“.网址”是什么？限时低价get世界500强同款！</li>
							<li>3个月仅需99元！云数据库首购4折起</li>
							<li class="center">查看更多</li>
						</ul>
					</div>
				</li>
				<li v-if="false">
					<span>费用</span>
					<div class="drop-down">
						<ul>
							<li>充值</li>
							<li>订单</li>
							<li>消费记录</li>
						</ul>
					</div>
				</li>
				<li>
					<a href="">帮助</a>
				</li>
				<li>
					<div class="avatar">
						<img :src="'/static/image/avatar/' + avatar">
					</div>
					<div class="drop-down">
						<ul>
							<li class="center" v-for="(bar, index) in sidebar" :key="index" v-if="bar.showflag == 3"
							@click="clickMenu(bar.link, bar.router, bar.id, bar.appInfoId)">{{bar.name}}</li>
							<li class="center" @click="logout()">安全退出</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import {mapMutations} from 'vuex'
import {mapGetters} from 'vuex'
import {domain} from '@/api';

export default {
	inject: ['reload'],
	data(){
		return {
			'avatar': 'default_handsome.jpg'
		}
	},
	created: function() {
		let getAvatar;
		if(getAvatar = JSON.parse(this.$localstorage.get('uinfo')).avatar){
			this.avatar = getAvatar
		}
	},
	methods: {
		/*这里完全复制sidebar组件里吗的方法*/
		clickMenu: function(link, router, id, appInfoId){
			this.$localstorage.remove('navbarBack');//删除navbarBack
			this.currMenu(id, appInfoId);
			window.open(link, '_self');
			if(link.indexOf(window.location.origin) != -1){//包含的话，说明跳转的域名和当前域名是一样的
				location.reload();
			}
		},
		/*
		这里完全复制sidebar组件里吗的方法
		*/
		currMenu: function(id = '', appInfoId = ''){
			if(id == ''){
				//从localstorage取
				let currMenuID = this.$localstorage.get('currMenuID');
				if(currMenuID){
					id = currMenuID;
				}else{//没有默认选中的菜单，则跳转到console组件
					this.$router.push({ name: 'console'})
				}
			}
			/* 注释原因： 不需要判断当前是哪个应用了*/
			// if(appInfoId == ''){
			// 	var currAppInfoId = this.$localstorage.get('currAppInfoId');
			// 	if(!currAppInfoId){
			// 		currAppInfoId = 0
			// 	}
			// }else{
			// 	var currAppInfoId = appInfoId
			// }
			
			Object.keys(this.allMenuList).forEach((k)=>{
				if(this.allMenuList[k].id == id){
					this.active = this.allMenuList[k].id;
					this.$localstorage.set('currMenuID', this.active);//保存当前菜单的ID
					// this.$localstorage.set('currAppInfoId', currAppInfoId);//保存当前菜单的currAppInfoId 注释原因： 不需要判断当前是哪个应用了
					let children = this.allMenuList[k].children;//Navbar组件的数据
					this.setNavbar({title: this.allMenuList[k].label.name, list: children})//把 navbar数据 存入vuex
				}
			})
			/*
			获取navbar数据，此数据是navbar的二级以上的数据，带返回路由的那种
			给navbar重新赋值
			*/
			let navbarBack = JSON.parse(this.$localstorage.get('navbarBack'));
			if(navbarBack != null){
				let list = getNavbarByMenuList(this.allMenuList, navbarBack.menuID)
				this.setNavbar({title: 'back', list: list, routerName: navbarBack.routerName})//把 navbar数据 存入vuex
			}

			/*设置默认的应用链接  根据appInfoId获取应用的链接, 存入vuex*/
			// this.__setAppLink(currAppInfoId) 注释原因：在api配置文件里加了域，每次加应用都必须在配置文件里加，所以这里不需要判断了
		},
		/*安全退出*/
        logout() {
        	this.$baseURL(domain.ac)
        	this.$get(this.$api.logout).then(res => {
                // console.log(res);
                /*成功*/
                if(res.data.code == 0){
                	this.$cookie.remove('isLogin');//刪除cookie登录信息
                	this.reload();
                }else{
                    this.$message({
                        showClose: true,
                        message: res.data.info,
                        type: 'error'
                    });
                }
            });
        },
        ...mapMutations({
			setNavbar: 'setNavbar',
		})
    },
	computed: {
		...mapGetters([
			'allMenuList',
			'sidebar',
		])
	}
}
</script>

<style lang="stylus" scoped>
.header
	width: 100%
	height: 50px
	line-height: 50px
	display: flex
	justify-content: space-between
	background-color: #252a2f
	color: #fff
	position: fixed
	z-index: 1
	.logo
		width: 50px
		height: 100%
		background-image: url("./logo.png")
		background-size: 45% 45%
		background-repeat: no-repeat
		background-position: center
		a
			display: block
			width: 100%
			height: 100%
			text-indent: -100px;
	.left
		flex: 1
		ul
			display: flex
			li
				padding: 0 15px
				cursor: pointer
			:hover
				background-color: #1a1c20
			a
				display: block
				color: #fff
				text-align: center
	.right
		flex: 2
		ul
			display: flex
			justify-content: flex-end
			li
				position: relative
				padding: 0 15px
				cursor: pointer
				display: flex
				align-items: center
				/deep/ sup
					top: 5px
					right: -10px
					&:hover
						background-color: #ed4014
				a
					display: block
					color: #fff
					text-align: center
				.avatar 
					width: 32px
					height: 32px
					border-radius: 100%
					overflow: hidden
					img
						width: 100%
						height: 100%
				.drop-down
					display: none
					position: absolute
					top: 50px
					right: 0
					line-height: 32px
					background-color: #1a1c20
					padding: 2px 0 2px
					ul
						max-width: 330px
						min-width: 80px
						display: flex
						flex-direction: column
						overflow: hidden
						li
							padding: 0 10px
							display: block
							overflow: hidden
							width: 100%
							white-space: nowrap
							text-overflow: ellipsis
							font-size: 12px
							&.center
								text-align: center
								border-top: solid 1px #303337
						:hover
							color: #4abadb
			:hover
				background-color: #1a1c20
			:hover .drop-down
				display: block
</style>